<div
  id="oem_header"
  class="control-all-header-fixed"
  style="--nav-bg: {{data.nav_bg}};--menu-color: {{data.menu_color}};"
>
  <div
    class="oem_header_top py-[15px]"
    style="--search-bar-bg: {{ data.search_bar_bg }};--search-bar-color: {{ data.search_bar_color }};"
  >
    <div class="container_wrapper">
      <div class="content">
        <div class="mobile_menu_icon_wrap md:hidden inline-flex items-center top_item gap-4">
          <div class="mobile_menu_btn inline-flex cursor-pointer">
            <svg
              t="1705549026628"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1983"
              width="24"
              height="24"
            >
              <path d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" fill="currentColor" p-id="1984"></path><path d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" fill="currentColor" p-id="1985"></path><path d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" fill="currentColor" p-id="1986"></path>
            </svg>
          </div>
          {% if data.is_search %}
          <div class="mobile_search_icon control-all-search inline-flex cursor-pointer">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
              <path fill="currentColor" d="M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z"></path>
            </svg>
          </div>
          {% endif %}
        </div>
        <!-- logo -->
        <div class="nav-logo flex top_item">
          {% include 'logo', settings: data, class: 'logo flex justify-center items-center' %}
        </div>
        <div class="top_item md:flex hidden justify-end gap-5 items-center md:mb-[14px]">
          {% if data.is_currency %}
            {% include 'currency', color: data.search_bar_color, is_currency_flag: data.is_currency_flag %}
          {% endif %}

          {% if data.is_search %}
            <div class="search_box">
              <form
                class="flex justify-center bg-[#fafafa] control-all-search"
                action="/search"
                onsubmit="return shopSearch('.search_txt')"
              >
                <div class="relative flex items-center input_wrap w-full">
                  <input
                    type="text"
                    class="search_txt px-[10px] py-[4px] bg-transparent"
                    placeholder="{{data.search_placeholder}}"
                  >
                  <button
                    type="submit"
                    class="bg-transparent h-full w-[30px] inline-flex items-center justify-center cursor-pointer"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="icon-search-1">
                      <path d="M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z"></path>
                    </svg>
                  </button>
                </div>
              </form>
            </div>
          {% endif %}
        </div>

        <div class="top_item">
          <!-- header_icons -->
          {% include 'header_icons', data: data %}
        </div>
      </div>
    </div>
  </div>

  <div class="oem_header_menu_wrap">
    <div class="container_wrapper">
      <!-- inline navigation -->
      <div id="inline_nav_wrap" class="md:flex hidden items-center overflow-hidden">
        <div class="h-full w-full flex">
          {% include 'header_menu', data: data %}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="oem_header_placeholder hidden"></div>

<script>
  $(function () {
    $('.oem_header_placeholder').height($('#oem_header').height());

    let oldScroll = 0;

    $(window).on('scroll', function () {
      let scrollDiffer = $(window).scrollTop() - oldScroll;
      let headerOffsetTop =
        document.querySelector('#oem_header').offsetTop + document.querySelector('#oem_header').clientHeight;
      if ($(window).scrollTop() > headerOffsetTop) {
        pcNavFixed(true, scrollDiffer);
      } else {
        pcNavFixed(false, scrollDiffer);
      }

      oldScroll = $(window).scrollTop();
    });

    // pc nav fixed
    function pcNavFixed(isShow, scrollDiffer) {
      if (isShow) {
        $('#oem_header').addClass('is_fixed');
        $('.oem_header_placeholder').removeClass('hidden');

        if (scrollDiffer > 0) {
          $('#oem_header.is_fixed').addClass('hiden');
        } else {
          $('#oem_header.is_fixed').addClass('animate').removeClass('hiden');
        }
      } else {
        $('#oem_header').removeClass('is_fixed hiden animate');
        $('.oem_header_placeholder').addClass('hidden');
      }
    }

    $('#oem_header .mobile_menu_btn').on('click', function () {
      switchClass($('#mobile_nav'), 'show');
    });

    $('#mobile_nav .mobile_nav_close span').on('click', function () {
      $('#mobile_nav').removeClass('show');
    });

    $('#mobile_nav .mobile_nav_mask').on('click', function () {
      $('#mobile_nav').removeClass('show');
    });

    $('#cart_icon').click(function () {
      window.shopMiniCart();
    });

    $('.minicart .close_btn').click(function () {
      $('.minicart').removeClass('minicart_on');
    });
    $('.minicart').click(function () {
      $('.minicart').removeClass('minicart_on');
    });
    $('.minicart_wrapper').click(function (e) {
      e.stopPropagation();
    });
    addCartNum();
  });
</script>
